<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>{% block tempTitle %}temp{% endblock %}</title>
    <style>
        /* Other CSS styles for your page */
        body {
            background-color: #f8f8f8;
            height: 100vh; /* Set the height of the body to 100% of the viewport height */
            margin: 0; /* Remove default margin */
        }

        header {
            height: 10%;
            background-color: #333;
            color: #fff;
            padding: 10px;
        }

        aside {
            background-color: lightcyan;
            width: 20%;
            padding: 10px;
            height: 100%; /* Set the height of the sidebar to 100% of the parent element (body) */
            float: left; /* Float the sidebar to the left */
        }

        main {
            background-color: #eee;
            padding: 10px;
            height: 100%; /* Set the height of the main content area to 100% of the parent element (body) */
            overflow: auto; /* Add scrollbars if content overflows */
        {#margin-left: 200px; /* Add left margin to accommodate the sidebar width */#}
        }

    </style>
</head>
<body>
<!-- Header Navigation -->
<header>
    <!-- Your header navigation code here -->
    {% block tempHeader %}{% endblock %}
</header>

<!-- Left Sidebar Menu -->
<aside>
    <!-- Your left sidebar menu code here -->
    {% block tempAside %}{% endblock %}
</aside>

<!-- Main Content Area -->
<main>
    <!-- Your main content code here -->
    {% block tempMain %}{% endblock %}
</main>
</body>
</html>